// 轮播图
(function parent(){
  let alt=1;
  let div=$(".banner>div[alt]");
  $(".arrowLeft").click(function(){
    // console.log(`点了一下左箭头`);
    alt>1?alt--:alt=4;
    div.each(function(){
      var $this=$(this);
      if($this.attr("alt") == alt){
        $this.css("opacity","1");
      }else{
        $this.css("opacity",0);
      }
    });
  });

  $(".arrowRight").click(function(){
    // console.log(`点了一下右箭头`);
    alt<4?alt++:alt=1;
    div.each(function(){
      var $this=$(this);
      if($this.attr("alt") == alt){
        $this.css("opacity","1");
      }else{
        $this.css("opacity","0");
      }
    });
  });

  var t=setInterval(function(){
    $(".arrowRight").click();
  },2000);


  $(".banner").mouseenter(function(){
    // console.log(`鼠标进入`);
    clearInterval(t);
    t="";
    // 鼠标进入banner中时,就显示箭头,否则的话不显示箭头
    let arrowEle = $(".arrow");
    arrowEle.css("opacity","1");
    // console.log(arrowEle)
  });

  $(".banner").mouseleave(function(){
    // console.log(`鼠标移出`);
    t=setInterval(function(){
      $(".arrowRight").click();
    },3000);
    // 鼠标进入banner中时,就显示箭头,否则的话不显示箭头
    let arrowEle = $(".arrow");
    arrowEle.css("opacity","0");
  });
})();

// 当页面滚动到多少距离时显示id为hidden的div
window.onscroll=function(){
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // console.log(scrollTop);
  let divEle = document.querySelector(".hidden");
  // console.log(divEle);
  if(scrollTop>=610){
    divEle.setAttribute("style","display:block");
  }else{
    divEle.setAttribute("style","display:none");
  }
}

window.onload = function (){
  $.ajax({
    url:'http://127.0.0.1:3000/',
    type:'get',
    success:res=>{
      let data = res.results;
      let sale = data.splice(0,8);
      console.log(data);
      let html='';
      let html2='';
      for(let n=0;n<sale.length;n++){
        html += `<div class="spec">
                    <a href="detail.html?id=${sale[n].lid}">
                      <div class="product_img">
                        <img src="../imgs/${sale[n].imgSrc}" alt="">
                      </div>
                      <p>${sale[n].l_name}</p>
                      <p class="price">¥${sale[n].price}</p>
                    </a>
                  </div>`;
      }
      for(let n=0;n<data.length;n++){
        html2 += `<div class="spec">
                    <a href="detail.html?id=${data[n].lid}">
                      <div class="product_img">
                        <img src="../imgs/${data[n].imgSrc}" alt="">
                      </div>
                      <p>${data[n].l_name}</p>
                      <p class="price">¥${data[n].price}</p>
                    </a>
                  </div>`;
      }
      $("#content_honor").html(html2);
      $("#content_sale").html(html);
    }
  });
}
